<template>
	<div class="correction-test">
		<AppHeader title="跟读" :showRight="true" :banAnimate="true" @leftClickEvent="handleHeaderLeft"
			@rightClickEvent="handleHeaderRight">
			<template #right>
				<img src="@/assets/images/followReading/search.png" width="20" height="20" />
			</template>
		</AppHeader>
		<div class="writtenTest-container">
			<van-tabs size='88px' v-model:active="active" @click-tab="onSearch" background="#f5f5f5" color="#0CB76C"
				title-active-color="#0CB76C">
				<van-tab v-for=" (item,index) in grades" :key="index" :title="item.gradeName"></van-tab>
			</van-tabs>

			<div v-if="grades.length">
				<Mescroll v-bind="mescrollConfig" class="research-dev-demand-pool__scroll-container"
					:style="{ height: 'calc(100vh - 88px)', position: 'fixed', top: '95px', bottom: 0 }"
					@init="mescrollInited" v-show="testList.length>0">
					<!-- :style="{ height: 'calc(100vh - 88px)',width:'100%', position: 'fixed', top: '95px', bottom: 0 }" -->
					<div class="product-box">
						<div class="product-item" v-for="i in testList" @click="handleClickItem(i)">
							<img :src="i.cover_full" />
							<div class="product-txt">
								<div class="ellipsis-multiline2">{{ i.productName }}</div>
							</div>
						</div>
					</div>
				</Mescroll>
				<van-empty v-if="testList.length==0" description="暂无数据"></van-empty>
			</div>
		</div>
	</div>
	<AppLoading v-if="loading.page" />
</template>
<script setup>
	import {
		ref,
		toRefs,
		reactive,
		onMounted,
	} from "vue";
	import {
		useRouter,
		useRoute
	} from "vue-router";
	import Mescroll from "mescroll.js/mescroll.vue";
	import {
		getGradeData,
		getFollowReadingBooks
	} from "@/api/followReading.js"
	import AppHeader from "@/components/AppHeader.vue";
	import AppLoading from "@/components/AppLoading.vue";


	import {
		showFailToast
	} from "vant";

	const route = useRoute();
	const router = useRouter();
	const handleHeaderLeft = () => {
		var u = navigator.userAgent;
		var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
		var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
		if (isAndroid) {
			window.android.goBack();
		} else if (isiOS) {
			window.webkit.messageHandlers.back.postMessage("")
		}
	};
	const handleHeaderRight = () => {
		router.push({
			path: "/followReading/search"
		});
	};
	const handleClickItem = (item) => {
		router.push({
			path: "/followReading/bookDetail",
			query: {
				id: item.productId,
			},
		});
	};

	const onSearch = () => {
		state.testList = []
		state.mescrollInstance.scrollTo(0, 0);
		state.mescrollInstance.resetUpScroll();
		// getBookList({
		// 	num: 1,
		// 	size: 10
		// })
	}
	const grades = ref([]);
	//获取年级列表
	const getGradesList = async () => {
		getGradeData().then(res => {
			grades.value = [{
				grade: '',
				gradeName: "全部",
				period: "1"
			}]
			grades.value = grades.value.concat(res.data.data);
			// getBookList({
			// 	num: 1,
			// 	size: 999
			// });
		});
	};

	const active = ref(0);
	const getBookList = ({
		num,
		size = 10
	}) => {
		getFollowReadingBooks({
			page: num,
			pageSize: size,
			grade: grades.value[active.value].grade
		}).then((res) => {
			const {
				code,
				data
			} = res;
			if (code == 1 && data) {
				const isNestPage = data.length < size;
				if (num === 1) {
					state.testList = data;
				} else {
					state.testList = state.testList.concat(data);
				}
				state.mescrollInstance.endSuccess(state.testList.length, !isNestPage);
			}
		})
	};
	const mescrollInited = (mescroll) => {
		state.mescrollInstance = mescroll;
	};
	const state = reactive({
		loading: {
			page: false,
		},
		testList: [],
		mescrollInstance: null,
		mescrollConfig: {
			down: {
				use: true,
			},
			up: {
				auto: true,
				isBounce: false,
				noMoreSize: 0,
				htmlNodata: '<p class="upwarp-nodata">-- 无更多数据 --</p>',
				callback: (page) => {
					getBookList(page);
				},
			},
		},
	});
	onMounted(() => {
		state.loading.page = false;
		if (route.query.token) { //安卓ios跳转token放在路由上
			localStorage.setItem("h5-token", route.query.token);
		}
		getGradesList()
	});




	const {
		loading,
		testList,
		mescrollConfig,
		showEnterPopup
	} = toRefs(state);
</script>
<style scoped lang="scss">
	::v-deep .van-tab__text {
		font-size: 18px;
		font-weight: 500;

	}

	::v-deep .van-tabs__wrap {
		border-bottom: 1px solid #E5E5E5;
	}

	.writtenTest-container {
		background-color: rgb(245, 245, 245);
		width: 100%;
		.product-box {
			display: flex;
			flex-wrap: wrap;
			align-content: flex-start;
			box-sizing: border-box;
			padding: 10px 10px 0;
			overflow-y: auto;

			.product-item:nth-child(3n) {
				margin-right: 0px !important;
			}

			.product-item {
				width: 32%;
				min-height: 192px;
				display: flex;
				flex-direction: column;
				font-size: 12px;
				margin-bottom: 10px;
				margin-right: 2%;
				border-radius: 15px;
				overflow: hidden;

				.product-txt {
					background-color: #fff;
					padding: 10px 5px;
					min-height: 30px;
					border-radius: 0 0 15px 15px;
				}

				.ellipsis-multiline2 {
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					overflow: hidden;
				}

				img {
					height: 132px;
				}
			}
		}
	}

	.correction-test {
		background: #f5f5f5;
		height: 100%;
		padding: 44px 0px 20px;
		box-sizing: border-box;

		.content {
			padding: 10px;
		}

		// .bgimg {
		//  width: 111px;
		// }
		.my-grid-item {
			margin-top: 10px;
			border-radius: 15px 15px 16px 16px;

			.my-grid-content {
				background-size: 100%;
				margin-top: 10px;
				background-image: url('../../assets/images/followReading/book.png');
				background-repeat: no-repeat;
				width: 100%;

				.title {
					text-align: center;
					color: #fff;
					margin-top: 20px;
					font-size: 20px;
					font-weight: 500;
					margin-top: 20px;
				}

				.name {
					text-align: center;
					color: #fff;
					font-size: 20px;
					font-weight: 500;
					margin-top: 20px;
					line-height: 24px;
				}

				.grade {
					text-align: center;
					color: #fff;
					font-size: 12px;
					margin-top: 15px;
				}

				.marks {
					color: #333;
					font-size: 12px;
					line-height: 20px;
					margin-top: 30px;
					padding-bottom: 10px;
					padding-left: 5px;
					font-weight: 500;
				}
			}
		}

	}
</style>